<template>
	<div id="app">
		<TranslateHeader></TranslateHeader>
		<TranslateMain @sendValue='openValue'></TranslateMain>
		<TranslateShow :Fdefault='defaultShow'></TranslateShow>
	</div>
</template>
<script>
	import TranslateHeader from './components/TranslateHeader.vue'
	import TranslateMain from './components/TranslateMain.vue'
	import TranslateShow from './components/TranslateShow.vue'
	import 'bootstrap/dist/css/bootstrap.min.css'
	import qs from 'qs'

	export default {
		name: 'App',
		components: {
			TranslateHeader,
			TranslateMain,
			TranslateShow
		},
		data() {
			return {
				defaultShow: '在此显示内容'
			}
		},
		methods: {
			openValue(text, startL, endL) {
				let data = qs.stringify({
					'src_text': text, 
					'from': startL,
					'to': endL,
					'apikey': '06f37461bcf9ab62c19aa5abeb5a44a0'
				})
				this.$axios.post('https://api.niutrans.com/NiuTransServer/translation', data).then(res => {
					console.log(res.data.tgt_text)
					this.defaultShow = res.data.tgt_text
				})
			}
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
